<template>
  <a-card :bordered="false" title="引用函数">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper"></div>
    <!-- table区域-begin -->
    <div>  
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{ x: true }"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="false"
      >
        <template slot="funPara" slot-scope="text, record">
          <a-popover>
            <template #content>
              <template v-if="record.funType != '嵌入子算法'">
                <p v-if="record.funType != '标准值获取'">
                  起始时间：{{ getParaItem('startDate', record.funParaJson) }}
                </p>
                <p v-if="['滚动取值', '日报取值', '日报滚动取值'].indexOf(record.funType) > -1">
                  滚动：{{ getParaItem('scroll', record.funParaJson) }}
                </p>
                <p>属性：{{ getParaItem('propName', record.funParaJson) }}</p>
                <p v-if="['滚动取值', '当日统计', '当月统计', '日报滚动取值'].indexOf(record.funType) > -1">
                  聚合：{{ getParaItem('aggregation', record.funParaJson) }}
                </p>
              </template>
              <template v-else>
                <p>算法ID：{{ getParaItem('selectFormulaId', record.funParaJson) }}</p>
                <p>算法名称：{{ getParaItem('selectFormulaName', record.funParaJson) }}</p>
                <p>获取结果：{{ getParaItem('runResultTypeText', record.funParaJson) }}</p>
              </template>
            </template>
            <a-button type="text" v-if="record.funPara">{{ record.funPara }}</a-button>
          </a-popover>
        </template> 
          <span slot="action" slot-scope="text, record">
              <a @click="handleTry(record)">函数试算</a>
          </span>
      </a-table>
    </div>
    <add-modal ref="addFunctionModalForm" @ok="addFormOk" :formulaId="formulaId" />
    <insert-formula-modal ref="insertFormulaModal" @ok="addFormOk" :formulaId="formulaId" />
    <slot-age-modal ref="slotAgeModal" @ok="addFormOk" :formulaId="formulaId" />
    <try-modal ref="tryForm" :formulaId="formulaId" />
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { getAction, postAction, deleteAction } from '@/api/manage'
import AddModal from './function/add'
import TryModal from './function/try'
import InsertFormulaModal from './function/insertFormula'
import slotAgeModal from './function/slotAge'

export default {
  name: 'UserFormulaList',
  components: {
    AddModal,
    TryModal,
    InsertFormulaModal,
    slotAgeModal,
  },
  data() {
    return {
      description: '算法库管理页面',
      funItems: ['滚动取值', '当日统计', '当月统计', '标准值获取', '槽龄获取', '日报取值', '日报滚动取值'],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '函数标识',
          align: 'left',
          dataIndex: 'funId',
        },
        {
          title: '函数类型',
          align: 'left',
          dataIndex: 'funType',
        },
        {
          title: '参数',
          align: 'left',
          dataIndex: 'funPara',
          scopedSlots: { customRender: 'funPara' },
        }, 
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/userFormula/userFormula/queryUserFormulaDetailByMainId',
        addFormulaDetail: '/userFormula/userFormula/addFormulaDetail',
        deleteFormulaDetail: '/userFormula/userFormula/deleteFormulaDetail',
      },
      dataSource: [],
      dictOptions: {},
      superFieldList: [],
      loading: false,
    }
  },
  watch: {
    formulaId: {
      handler: function (newVal, oldVal) {
        this.requestData()
      },
    },
  },
  created() {
    if (this.formulaId) {
      this.requestData()
    }
  },
  props: {
    formulaId: {
      type: Number,
    },
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    /** 查询某个tab的数据 */
    requestData() {
      var that = this
      let params = { id: this.formulaId }
      getAction(this.url.list, params)
        .then((res) => {
          let { result } = res
          if (result) {
            if (Array.isArray(result)) {
              that.dataSource = result
            } else if (Array.isArray(result.records)) {
              that.dataSource = result.records
            }
          }
        })
        .finally(() => {})
    },
    colorStyle(index) {
      var colorArr = ['#0985a1', '#b71616', '#4183c4', '#525252', '#067809', '#8b1007', '#a5a006', '#03a9f4']
      return colorArr[Math.floor(Math.random() * colorArr.length)]
    },
    handleAdd() {
      this.$router.push({ path: '/userFormula/add' })
    },
    handleEdit: function (record) {
      this.handleShow(record.funType, '编辑', record)
    },
    handleInsertFormula: function () {
      this.$refs.insertFormulaModal.open()
    },
    handleDelete: function (id) {
      // let id1 = this.dataSource.findIndex(item => {
      //   if (item.id == id) {
      //     return true;
      //   }
      // })
      // this.dataSource.splice(id1, 1);
      var that = this
      deleteAction(that.url.deleteFormulaDetail, { detailId: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.requestData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleShow(funType, action, rowData) {
      var that = this
      if (funType == '槽龄获取') {
        if (action) {
          this.$refs.slotAgeModal.edit(rowData)
        } else {
          this.$refs.slotAgeModal.open()
        }
        return
      }
      if (funType == '嵌入子算法') {
        this.$refs.insertFormulaModal.edit(rowData)
        return
      }
      if (!action) {
        action = '新增'
        this.$refs.addFunctionModalForm.add()
      } else {
        this.$refs.addFunctionModalForm.edit(rowData)
      }
      this.$refs.addFunctionModalForm.title = action + ' - ' + funType
      this.$refs.addFunctionModalForm.funType = funType 
    },
    handleTry(record) {
      this.$refs.tryForm.show(record)
    },
    addFormOk(param) {
      var that = this
      that.$emit('refreshFormulaContent', param.funId)
      that.requestData()
    },
    getParaItem(column, funParaJson) {
      if (funParaJson) {
        var obj = JSON.parse(funParaJson)
        if (column == 'scroll') {
          return obj[column] + ' ' + obj['scrollValue'] + ' ' + obj['scrollUnit']
        }
        if (column == 'startDate') {
          return obj['isCurrentDate'] ? '当前时间' : obj[column]
        }
        return obj[column]
      }
      return ''
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.ant-card-grid {
  padding: 20px 0px;
}
.bsSpan {
  vertical-align: middle;
  display: inline-block;
  width: calc(100% - 0px);
  overflow: hidden;
}
.fun-ico {
  height: 50px;
  margin-bottom: 5px;
}
</style>